
$left:3px;
$right:2px;
header {
    .top {
        background: #f5f5f5;
    }
    .w {
        width: 94.089%;
        margin: auto;
        .wrapper1 {
            margin-left: $left;
            // margin-right: $right;
            // max-width: 1920px;
            display: flex;
            justify-content: space-between;
            line-height: 36px;
            .nav_left {
                display: flex;
                li {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    width: 100%;
                    .a1 {
                        padding-left: 0;
                    }
                    a {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        width: 100%;
                        padding-right: 12px;
                        padding-left: 12px;
                    }
                }
            }
            .right {
                display: flex;
                .help {
                    margin-right: 6px;
                    position: relative;
                    .help_hover {
                        position: absolute;
                        background-color: white;
                        border-radius: 0 0 8px 8px;
                        min-width: 240px;
                        right: 0;
                        top: 36px;
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity .2s,visibility 0s linear .2s,transform .25s ease;
                        .zhu {
                            font-size: 16px;
                            padding: 12px 8px;
                            padding-left: 24px;
                            display: block;
                        }
                        .nav_li {
                            font-size: 14px;
                            line-height: 15px;
                            padding: 12px 24px 24px 16px;
                            z-index: 4;
                            a {
                                display: block;
                                color: #757575;
                                padding: 4px 8px;
                            }
                        }
                    }
                }
                .help:hover .help_hover {
                    visibility: visible;
                    opacity: 1;
                    z-index: 8;
                }
                .ml1-sm {
                    margin-left: 4px;
                    margin-right: 4px;
                }
                .max_right1 {
                    a {
                        margin-left: 4px;
                        margin-right: 4px;
                    }
                    .loginBtn {
                        border: 0;
                        margin-left: 4px;
                        padding-right: 12px;
                        font-size: 12px;
                        background: #f5f5f5;
                    }
                }
                .max_right2 {
                    display: none;
                    line-height: 36px;
                    .showName {
                        padding-bottom: 10px;
                        margin-left: 6px;
                    }
                    .logout {
                        border: 0;
                        padding-left: 8px;
                        padding-right: 12px;
                        font-size: 12px;
                        background: #f5f5f5;
                    }
                }
                .personal_center {
                    padding-top: 5px;
                    display: none;
                    cursor: pointer;
                }
            }
        }
        
        
        .wrapper2 {
            margin-left: $left;
            background: #fff;
            position: relative;
            height: 60px;
            width: 100%;
            transition: transform .15s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .nav_menu {
                display: flex;
                justify-content: center;
                font-weight: 500;
                font-size: 16px;
                line-height: 16px;
                margin-left: 16%;
                li {
                    line-height: 58px;
                    padding: 0 12px 0 12px;
                    .dian {
                        color: red;
                    }
                    ul {
                        width: 220px;
                        li {
                            border-bottom: 0 !important;
                        }
                    }
                    .xin {
                        display: flex;
                        // justify-content: space-evenly;
                        font-size: 14px;
                        line-height: 14px;
                        color: #757575;
                        // text-align: center;
                        white-space: nowrap;
                        background-color: white;
                        visibility: hidden;
                        position: absolute;
                        overflow: hidden;
                        opacity: 0;
                        top: 60px;
                        left: 0;
                        right: 0;
                        transition: transform .1s ease,opacity 0ms linear .1s,visibility 0ms linear .1s;
                        li {
                            line-height: 24px;
                        }
                        .nav_hot {
                            // padding: 0 60px 0 370px;
                            padding-left: 370px;
                            .li_dan {
                                font-size: 16px;
                                color: black;
                                margin-top: 28px;
                                margin-bottom: 14px;
                            }
                        }
                        .nav_new {
                            margin-top: 27px;
                        }

                        .nav_app {
                            margin-top: 28px;
                        }
                    }
                }
                li:hover {
                    border-bottom:2px solid black
                }
                .li1:hover .xin {
                    visibility: visible;
                    opacity: 1;
                    z-index: 888;
                }
            }
            .w2_right {
                display: flex;
                .search {
                    width: 180px;
                    height: 40px;
                    border-radius: 100px;
                    border: 0;
                    background-color: #f5f5f5;
                    display: flex;
                    overflow: hidden;
                    button {
                       .pre-search-input-icon {
                        top: 2px;
                        left: 2px;
                        padding: 8px 8px;
                       }
                    }
                    input {
                        width: 100px;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 16px;
                        padding-left: 8px !important;
                    }
                    input,button {
                        border: 0;
                        padding: 0;
                        border-radius: 100%;
                        height: inherit;
                        background-color: inherit;
                        /* 专门用于清除表单上点击时候的外框 */
                        outline: none;
                    }
                    ::placeholder {
                        color: #ccc9c9;
                    }
                    .magnifier:hover {
                        background-color: rgba(0,0,0,.24);
                    }
                    
                }
                .HeaderButtonGroup {
                    display: flex;
                    align-items: flex-end;
                    .love {
                        width: 30px;
                        height: 30px;
                        border-radius: 999px;
                        margin-right: 25px;
                        margin-left: 30px;
                        text-align: center;
                    }
                    .Cart {
                        width: 30px;
                        height: 30px;
                        border-radius: 999px;
                        text-align: center;
                    }
                    .Cart:hover {
                        background-color: rgba(0,0,0,.24);
                    }
                    .love:hover {
                        background-color: rgba(0,0,0,.24);
                    }
                }
            }
        }
    }

    .login {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        display: none;
        user-select: none;
        z-index: 999;
        .lu {
            width: 436px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .off {
                font-size: 40px;
                color: black;
                font-weight: bold;
                margin: 10px;
                float: right;
                cursor: pointer;
            }
            .lo_top {
                .pre-logo-svg {
                    // margin: 0px auto;
                    margin-left: 30px;
                }
                .view-header {
                    color: #111;
                    font-size: 26px;
                    line-height: 26px;
                    margin: 0 auto;
                    text-align: center;
                    font-weight: 700;
                    padding-top: 10px;
                    padding-bottom: 27px;
                }
            }
            input {
                height: 38px;
                width: 290px;
                padding-left: 16px;
                padding-right: 16px;
                margin: 5px 0;
                border: 1px solid #e5e5e5;
            }
            .yan {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                width: 306px;
                padding-left: 16px;
                margin: 5px auto;
                border: 1px solid #e5e5e5;
                input {
                    width: 190px;
                    height: 38px;
                    padding-left: 0;
                    border: 0;
                }
                span {
                    display: block;
                    width: 100px;
                    height: 38px;
                    font-size: 16px;
                    line-height: 38px;
                    background: #d4d3d3;
                }
                .showCode {
                    font-style: italic;
                }
            }
            #lgb_lu {
                height: 38px;
                border: 1px solid #e5e5e5;
                margin-top: 20px;
                width: 322px;
                color: white;
                background-color: black;
                cursor: pointer;
            }
            #lgb_lu:disabled {
                background-color: #aaa;
            }
            #no_vip {
                padding-top: 10px;
                padding-bottom: 30px;
                .join {
                    cursor: pointer;
                }
            }
            ::placeholder {
                color: #7a7a7a;
            }
        }
    }


    .register {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        display: none;
        user-select: none;
        z-index: 999;
        .lu {
            width: 436px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .off {
                font-size: 40px;
                color: black;
                font-weight: bold;
                margin: 10px;
                float: right;
                cursor: pointer;
            }
            .lo_top {
                .pre-logo-svg {
                    // margin: 0px auto;
                    margin-left: 30px;
                }
                .view-header {
                    color: #111;
                    font-size: 26px;
                    line-height: 26px;
                    margin: 0 auto;
                    text-align: center;
                    font-weight: 700;
                    padding-top: 10px;
                    padding-bottom: 27px;
                }
            }
            input {
                height: 38px;
                width: 290px;
                padding-left: 16px;
                padding-right: 16px;
                margin: 5px 0;
                border: 1px solid #e5e5e5;
            }
            .yan {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                width: 306px;
                padding-left: 16px;
                margin: 5px auto;
                border: 1px solid #e5e5e5;
                input {
                    width: 190px;
                    height: 38px;
                    padding-left: 0;
                    border: 0;
                }
                span {
                    display: block;
                    width: 100px;
                    height: 38px;
                    font-size: 16px;
                    line-height: 38px;
                    background: #d4d3d3;
                }
                .showCode {
                    font-style: italic;
                }
            }
            #lgb_ce {
                height: 38px;
                border: 1px solid #e5e5e5;
                margin-top: 20px;
                width: 322px;
                color: white;
                background-color: rgb(0, 0, 0);
                cursor: pointer;
            }
            #lgb_ce:disabled {
                background-color: #aaa;
            }
            #no_vip {
                padding-top: 10px;
                padding-bottom: 30px;
                .login_lo {
                    cursor: pointer;
                }
            }
            ::placeholder {
                color: #7a7a7a;
            }
        }
    }
}